<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    {include file="common/css"}
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="keywords" placeholder="用户信息" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <select name="type" lay-search="">
                        <option value="">搜索身份</option>
                        <option value="2">VIP用户</option>
                        <option value="1">普通用户</option>
                    </select>
                </div>
                <div class="layui-form-item layui-inline">
                    <input type="text" name="create_time" class="layui-input" id="wheretime" placeholder="日期查询" autocomplete="off">
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>

<script type="text/html" id="toolbar">
    <span>
        用户列表
    </span>
    
</script>

<script type="text/html" id="options">
    <button class="pear-btn pear-btn-primary pear-btn-xs" lay-event="details"><i class="layui-icon layui-icon-set-sm"></i></button>
    <button class="pear-btn pear-btn-warming pear-btn-xs" lay-event="role"><i class="layui-icon layui-icon-user"></i></button>
</script>

<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{# if(d.status==1){ }} checked {{# } }}>
</script>
<script type="text/html" id="passport-type">
    {{#if (d.type == '1') { }}
    <span>普通会员</span>
    {{# }else if(d.type == '2'){ }}
    <span>VIP</span>
    {{# } }}
</script>
{include file="common/js"}
<script>
    layui.use(['table', 'form', 'jquery','common','laydate'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let laydate = layui.laydate;
        let MODULE_PATH = "{$Request.root}/admin.passport/";
        let cols = [[{
            type: 'checkbox'
        },
            {
                field: 'id',
                title: '用户编号',
                sort: true,
                unresize: true
            },{
                title: '头像/昵称',
                field: 'avatar',
                unresize: true,
                templet: function (d) {
                    _html = '<img src="'+d.avatar+'" onclick=viewImage(\''+d.avatar+'\') style="width: 30px;height:30px;border-radius: 50%">' +
                        '<span>'+d.name+'</span>';

                    return _html;
                }
            },
            {
                title: '标识',
                field: 'openid',
                unresize: true,
            },
            {
                title: '姓名',
                field: 'realname',
                unresize: true,
            },
            {
                field: 'tel',
                title: '手机号',
                unresize: true,
            },
            {
                field: 'type',
                title: '会员状态',
                unresize: true,
                align: 'center',
                templet:'#passport-type'
            },
            {
                field: 'branchname',
                title: '公司',
                unresize: true,
            },
            {
                field: 'staffrealname',
                title: '助教',
                unresize: true,
            },
            {
                field: 'invitername',
                title: '邀请人',
                unresize: true,
            },
            {
                field: 'balance',
                title: '余额/累计',
                unresize: true,
                align: 'center',
                templet:function(d){
                    _html = '<span>'+d.balance/100+'</span>'+'/'+'<span>'+d.cashback/100+'</span>';
                    return _html;
                }
            },
            {
                title: '操作',
                toolbar: '#options',
                align: 'center',
                unresize: true,
                width: 200
            }
        ]]
        
        table.render({
            elem: '#dataTable',
            url: MODULE_PATH + 'index',
            page: true,
            cols: cols,
            cellMinWidth: 100,
            skin: 'line',
            toolbar: '#toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
        });

        table.on('tool(dataTable)', function(obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'details') {
                window.details(obj);
            } else if (obj.event === 'role') {
                window.role(obj);
            } else if (obj.event === 'permission') {
                window.permission(obj);
            }
        });

        table.on('toolbar(dataTable)', function(obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            } else if (obj.event === 'recycle') {
                window.recycle(obj);
            }
        });

        form.on('submit(query)', function(data) {
            table.reload('dataTable', {
                where: data.field,
                page:{curr: 1}
            })
            return false;
        });

        form.on('switch(status)', function(data) {
            var status = data.elem.checked?1:2;
            var id = this.value;
            var load = layer.load();
            $.post('status',{status:status,id:id},function (res) {
                layer.close(load);
                //判断有没有权限
                if(res && res.code==999){
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 2000,
                    })
                    return false;
                }else if (res.code==200){
                    layer.msg(res.msg,{icon:1,time:1500})
                } else {
                    layer.msg(res.msg,{icon:2,time:1500},function () {
                        $(data.elem).prop('checked',!$(data.elem).prop('checked'));
                        form.render()
                    })
                }
            })
        });
        //弹出窗设置 自己设置弹出百分比
        function screen() {
            if (typeof width !== 'number' || width === 0) {
                width = $(window).width() * 0.8;
            }
            if (typeof height !== 'number' || height === 0) {
                height = $(window).height() - 20;
            }
            return [width + 'px', height + 'px'];
        }

        window.add = function() {
            layer.open({
                type: 2,
                maxmin: true,
                title: '新增管理员',
                shade: 0.1,
                area: screen(),
                content: MODULE_PATH + 'add'
            });
        }

        window.details = function(obj) {
            layer.open({
                type: 2,
                maxmin: true,
                title: '用户详情',
                shade: 0.1,
                area: ['100%', '100%'],
                content: MODULE_PATH + 'details/id/'+obj.data['id']
            });
        }

        window.role  = function(obj) {
            layer.open({
                type: 2,
                maxmin: true,
                title: '分配角色',
                shade: 0.1,
                area: screen(),
                content: MODULE_PATH + 'role/id/'+obj.data['id']
            });
        }

        window.permission = function(obj) {
            layer.open({
                type: 2,
                maxmin: true,
                title: '分配直接权限',
                shade: 0.1,
                area: screen(),
                content: MODULE_PATH + 'permission/id/'+obj.data['id']
            });
        }

        window.recycle = function() {
            layer.open({
                type: 2,
                maxmin: true,
                title: '回收站',
                shade: 0.1,
                area: screen(),
                content: MODULE_PATH + 'recycle',
                cancel: function () {
                    table.reload('dataTable');
                }
            });
        }

        window.remove = function(obj) {
            layer.confirm('确定要删除该管理', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url:MODULE_PATH + 'remove',
                    data:{id:obj.data['id']},
                    dataType: 'json',
                    type: 'POST',
                    success: function(res) {
                        layer.close(loading);
                        //判断有没有权限
                        if(res && res.code==999){
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 2000,
                            })
                            return false;
                        }else if (res.code==200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            }, function() {
                                obj.del();
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.batchRemove = function(obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            var ids = []
            var hasCheck = table.checkStatus('dataTable')
            var hasCheckData = hasCheck.data
            if (hasCheckData.length > 0) {
                $.each(hasCheckData, function (index, element) {
                    ids.push(element.id)
                })
            }
            layer.confirm('确定要删除这些管理员', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url:MODULE_PATH + 'batchRemove',
                    data:{ids:ids},
                    dataType: 'json',
                    type: 'POST',
                    success: function(res) {
                        layer.close(loading);
                        //判断有没有权限
                        if(res && res.code==999){
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 2000,
                            })
                            return false;
                        }else if (res.code==200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            }, function() {
                                table.reload('dataTable');
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.refresh = function(param) {
            table.reload('dataTable');
        }
        //时间插件
        laydate.render({
            elem: '#wheretime',
        });
    })
</script>
</body>
</html>
